<template>
  <div class="chart_margin">
    <Card style="padding: 0px 1rem;" >
      <div class="chat_title" v-text="titleData"></div>
      <div class="chat_number">
        <ve-bar :data="chatData.datas" :settings="setting"   :width="width" :height="height"></ve-bar>
      </div>
      <div v-text="descData" class="chat_desc"></div>
    </Card>
  </div>
</template>

<script>
  export default {
    name: "TiyBarChart",
    props:{
      chatData:{
        type:Object,
        default: ()=>{
          return {
            title:'组件标题',
            desc:'具体的描述',
            extra:'',
            datas:{}
          }
        }
      },
      title:{
        type: String,
        default:''
      },
      desc:{
        type: String,
        default:''
      },
      extra:{
        type: String,
        default:''
      },
      setting:{
        type:Object,
        default:() => {
          return {
            dataType:'normal'
          }
        }
      },
      width:{
        type:String,
        default:'auto'
      },
      height:{
        type:String,
        default:'300px'
      }


    },
    data(){
      return{

      }
    },
    computed:{
      titleData(){
        return this.checkEmpty(this.title,this.chatData.title);
      },
      descData(){
        return this.checkEmpty(this.desc,this.chatData.desc);
      },
      extraData(){
        return this.checkEmpty(this.extra,this.chatData.extra);
      }

    },
    methods:{
      checkEmpty(value1,value2,defaultValue){
        if (value1!==''&& value1!==undefined &&value1!==null){
          return value1;
        }else if (value2!==''&& value2!==undefined &&value2!==null) {
          return value2;
        }else{
          return defaultValue===undefined?'':defaultValue;
        }


      }

    }
  }
</script>

<style lang="less" scoped>
@import  (once,optional)  "chat_base";

</style>
